<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="音伴尔下载页面，给用户提供下载app学习的页面" />
<meta name="keywords"  content="音伴尔app下载，手机软件，音伴尔教育app"/>
{/* LAYOUT模板 */}
	<layout name="download_layout"/>
{/* LAYOUT模板 */}
<css href="__PUBLIC__/css/lrc_test.css"/>
<css href="__PUBLIC__/css/jquery-ui.css"/>
<js href="__PUBLIC__/js/core/jquery-1.8.0.js"/>
<js href="__PUBLIC__/js/core/jquery-ui.1.10.4.js"/>
<js href="__PUBLIC__/js/core/plugins.js"/>

<!--#logo#begin-->
<style>
.logo-wrap{position:absolute;top:-10px;left:400px;background:#fff;z-index:2000; line-height:60px; text-align:center;border-radius:6px; width:120px;height:60px;background:#1FD1FE;font-family:'宋体';font-weight:bolder;font-size:30px;}
</style>
<div class="logo-wrap">
	音伴尔
</div>
<!--#logo#end-->

 




<css href="__PUBLIC__/plugs/page-scrolling/jquery.pagepiling.css"/>
<css href="__PUBLIC__/plugs/page-scrolling/examples/examples.css"/>
<js href="__PUBLIC__/plugs/page-scrolling/jquery.pagepiling.min.js"/>
<script type="text/javascript">
	var deleteLog = false;
	$(document).ready(function() {
		$('#pagepiling').pagepiling({
			menu: '#menu',
			anchors: ['page1', 'page2', 'page3','page4','page5','page6'],
			/*sectionsColor: ['#bfda00', '#2ebe21', '#2C3E50', '#51bec4','#51beb6','#51be84','#51bfc4'],*/
			onLeave: function(index, nextIndex, direction){
				if(deleteLog){
					$('#callbacksDiv').html('');
				}
				$('#callbacksDiv').append('<p>onLeave - index:' + index + ' nextIndex:' + nextIndex + ' direction:' + direction + '</p>');
			},
			afterRender: function(){
				$('#callbacksDiv').append('<p>afterRender</p>');
			},
			afterLoad: function(anchorLink, index){
				$('#callbacksDiv').append('<p>afterLoad - anchorLink:' + anchorLink + " index:" + index + '</p>');
				
				/*section1*/
				if(index ==1){
					/* img1*/
					$('#section1').find('.section1-img1').delay(100).animate({
						left: '10%'
					}, 2000, 'easeOutExpo', function(){
						$('#section1').find('img.section1-img1').first().fadeIn(700, function(){
							$('#section1').find('img.section1-img1').last().fadeIn(600);
						});
					});
					/*img2*/
					$('#section1').find('.section1-img2').delay(100).animate({
						left: '-14%'
					}, 2000, 'easeOutExpo', function(){
						$('#section1').find('img.section1-img2').first().fadeIn(700, function(){
							$('#section1').find('img.section1-img2').last().fadeIn(600);
						});
					});
					/*img3*/
					$('#section1').find('.section1-img3').delay(100).animate({
						left: '-38%'
					}, 2000, 'easeOutExpo', function(){
						$('#section1').find('img.section1-img3').first().fadeIn(700, function(){
							$('#section1').find('img.section1-img3').last().fadeIn(600);
						});
					});
				}
				
				/*section 2*/
				if(index == 2){
					/*img1*/
					$('#section2').find('img.img1').delay(100).animate({
						left: '-3%'
					}, 1500, 'easeOutExpo', function(){
						$('#section2').find('img.img1').first().fadeIn(700, function(){
							$('#section2').find('img.img1').last().fadeIn(600);
						});
					});
					/*img2*/
					$('#section2').find('img.img2').delay(100).animate({
						left: '-5%'
					}, 1500, 'easeOutExpo', function(){
						$('#section2').find('img.img2').first().fadeIn(700, function(){
							$('#section2').find('img.img2').last().fadeIn(600);
						});
					});
					/*img3*/
					$('#section2').find('img.img3').delay(100).animate({
						left: '-30%'
					}, 1500, 'easeOutExpo', function(){
						$('#section2').find('img.img3').first().fadeIn(700, function(){
							$('#section2').find('img.img3').last().fadeIn(600);
						});
					});
					/*text1*/
					$('#section2').find('img.text1').delay(100).animate({
						left: '30%'
					}, 1500, 'easeOutExpo', function(){
						$('#section2').find('img.text1').first().fadeIn(700, function(){
							$('#section2').find('img.text1').last().fadeIn(600);
						});
					});
					/*text2*/
					$('#section2').find('img.text2').delay(100).animate({
						left: '10%'
					}, 1500, 'easeOutExpo', function(){
						$('#section2').find('img.text2').first().fadeIn(700, function(){
							$('#section2').find('img.text2').last().fadeIn(600);
						});
					});
				}

				/*section 3*/
				if(anchorLink == 'page3'){
					/*section 3*/
					$('#section3').find('.intro').delay(100).animate({
							left: '0%'
					}, 1500, 'easeOutExpo');
				}
				deleteLog = true;
			}
		});
	});
</script>
<style>
/* Style for our header texts */
h1{font-size: 5em;font-family: arial,helvetica;color: #fff;margin:0;padding:0;}
/* Centered texts in each section */.section{text-align:center;}
/* Backgrounds will cover all the section */#section1,#section2,#section3{background-size: cover;}/* Defining each section background and styles* --------------------------------------- */#section1{background-image: url(__PUBLIC__/plugs/page-scrolling/examples/imgs/bg1.jpg);}#section2{background-image: url(__PUBLIC__/plugs/page-scrolling/examples/imgs/bg2.jpg);padding: 6% 0 0 0;}#section3{background-image: url(__PUBLIC__/plugs/page-scrolling/examples/imgs/bg3.jpg);padding: 6% 0 0 0;}#section4{background-image: url(__PUBLIC__/plugs/page-scrolling/examples/imgs/bg4.jpg);padding: 6% 0 0 0;}#section5{background-image: url(__PUBLIC__/plugs/page-scrolling/examples/imgs/bg5.jpg);padding: 6% 0 0 0;}#section6{background-image: url(__PUBLIC__/plugs/page-scrolling/examples/imgs/bg6.jpg);padding: 6% 0 0 0;}#section3 h1{color: #000;}#section1 h1{position: absolute;left: 0;right: 0;margin: 0 auto;top: 30px;color: #fff;}#section1 .app-img-list{left:0px;position:relative;}#section1 .app-img-list .section1-img1{position:relative; top:239px; left:-150%;z-index:100;}#section1 .app-img-list .section1-img2{position:relative; top:149px; left:-150%;z-index:99;}#section1 .app-img-list .section1-img3{position:relative; top:39px; left:-150%;z-index:98;}#section2 .intro{left: -150%;position: relative;}#section2 p{display: none;}#section2 h1,#section2 p{text-shadow: 1px 5px 20px #000;}#section3 h1,#section3 p{text-shadow: 1px 5px 20px #000;color: #fff;}
/*section2 img list */
#section2 .section2-img-list{position:relative; left:0%;}
#section2 .section2-img-list .img1 {position:relative;left:-150%;top:100px;z-index:100;}
#section2 .section2-img-list .img2 {position:relative;left:-150%;top:-100px;z-index:99;}
#section2 .section2-img-list .img3 {position:relative;left:-150%;top:-350px;z-index:98;}
#section2 .section2-text-list {position:relative; left:0%;}
#section2 .section2-text-list .text1{position:relative;left:150%;top:-350px;z-index:98;}
#section2 .section2-text-list .text2{position:relative;left:150%;top:-250px;z-index:98;}
</style>
<div id="pagepiling">
	<div class="section" id="section1">
		<h1 class="hide">pagePiling.js</h1>
		<!--图片-->
		<div class="app-img-list">
			<img class="section1-img1" src="__PUBLIC__/plugs/page-scrolling/examples/imgs/section-1-01.jpg"/>
			<img class="section1-img2" src="__PUBLIC__/plugs/page-scrolling/examples/imgs/section-1-02.jpg"/>
			<img class="section1-img3" src="__PUBLIC__/plugs/page-scrolling/examples/imgs/section-1-03.jpg"/>
		</div>
	</div>
	<!--#section2#-->
	<div class="section" id="section2">
		<div class="section2-img-list">
			<img class="img1" src="__PUBLIC__/plugs/page-scrolling/examples/imgs/section-2-01.jpg" />
			<img class="img2" src="__PUBLIC__/plugs/page-scrolling/examples/imgs/section-2-02.jpg" />
			<img class="img3" src="__PUBLIC__/plugs/page-scrolling/examples/imgs/section-2-03.jpg" />		
		</div>
		<div class="section2-text-list">
			<img class="text1" src="__PUBLIC__/plugs/page-scrolling/examples/imgs/section-2-text1.png" />
			<img class="text2" src="__PUBLIC__/plugs/page-scrolling/examples/imgs/section-2-text2.png" />	
		</div>
	</div>
	<div class="section" id="section3">
		<div class="intro hide">
			<h1>Just terrific!</h1>
			<p>Use the power of images</p>
		</div>
	</div>
	<div class="section" id="section4">                                                                                                                                                       
	
	
		<div class="intro hide">
			<h1>Just terrific!</h1>
			<p>Use the power of images</p>
		</div>
	</div>
	<div class="section" id="section5">
		<div class="intro hide">
			<h1>Just terrific!</h1>
			<p>Use the power of images</p>
		</div>
	</div>
	<div class="section" id="section6">
		<style>
			.return-first-page{webkit-border-radius: 30px;-webkit-border-top-right-radius: 30px;-webkit-border-bottom-left-radius: 30px;-moz-border-radius: 30px;-moz-border-radius-topright: 30px;-moz-border-radius-bottomleft: 30px;border-radius: 30px;border-top-right-radius: 30px;border-bottom-left-radius: 30px;background: #FF470E;border: 2px solid #eee;width: 300px;height: 50px;font-size: 18px;line-height: 50px;color: #fff;z-index: 200;display:block;margin:auto;cursor: pointer;}.link-list ul{list-style:none; margin-left:300px;}.link-list li{display:block; float:left; margin-left:15px;cursor:pointer;}.link-list li a{color:#fff;}.link-list li a:hover{color:yellow;}
		</style>
		<div class="intro">
			<h2 class="return-first-page" onclick="location.href='http://www.yinbaner.com';">返回首页</h2>
		</div>
		<div class="link-list" style="display:block;position:absolute; color:#fff; bottom:150px; height:20px;">
			<ul>
				<li><a href="http://www.yinbaner.com">音伴尔首页</a></li>
				<li>|</li>
				<li><a href="__APP__/goods">产品介绍</a></li>
				<li>|</li>
				<li><a href="http://bbs.yinbaner.com">音伴尔社区</a></li>
				<li>|</li>
				<li><a href="__APP__/cooperate">商务合作</a></li>
				<li>|</li>
				<li><a href="__APP__/service">售后服务</a></li>
				<li>|</li>
				<li><a href="__APP__/goods/list">产品商城</a></li>
			</ul>
		</div>
	</div>
</div>

<div id="loading" class="hide"><!--Qloading:不能删除--></div>
<div id="dialog" class="hide"><!--Qloading:不能删除--></div>

<script>
/* using bind   */
$('#section1').bind('mousewheel', function(event, delta, deltaX, deltaY) {
	/*var height =	$('#section1').offset().top();
	//alert(height);*/
}); 

$(document).ready(function(){
	$('.submit-btn').click(function(){	
		var number	=	$('.phone-msg').QVal();
		$.ajax({
			url:'__APP__/download/sendappurl',
			type:'post',
			dataType:'json',
			data:{tel:number.phone},
			beforeSend:function(){
				$('#loading').QLoading({status:'open',model:true});
			},
			success:function(msg){
				$('#loading').QLoading({status:'close',time:2,text:msg.info,img:'happy'});
			}
		});
	});
});
</script>











